<template>
  <q-tabs dense v-model="tab" class="text-primary" align="left">
    <q-tab name="home" label="账号信息" />
  </q-tabs>
  <q-tab-panels v-model="tab" animated>
    <q-tab-panel name="home">
      <div class="text-h6 q-py-md text-bold">登录账号</div>
      <div>
        <q-input
          class="w-xs"
          readonly
          v-model="userInfo.email"
          outline
          type="text"
          label="登录邮箱"
        />
      </div>
      <div>
        <q-input
          class="w-xs"
          readonly
          v-model="passwd"
          outline
          type="password"
          label="登录密码"
          ><template v-slot:after>
            <q-btn
              @click="
                () => {
                  changePdDig = true;
                }
              "
              color="blue-8"
              :label="userInfo.hasPasswd ? '修改密码' : '设置密码'"
            >
            </q-btn>
          </template>
        </q-input>
      </div>
      <div class="text-h6 q-py-md text-bold">账号注销</div>
      <q-card class="flex items-center justify-between q-pa-md">
        <div>确认注销账号？注销后无法恢复！请自行承担数据丢失的风险！</div>

        <q-btn outline @click="cancelUser" label="注销" />
      </q-card>
    </q-tab-panel>
  </q-tab-panels>
  <q-dialog v-model="changePdDig" persistent>
    <q-card class="q-pa-md min-w-md">
      <div class="text-h6 q-mb-md">修改密码</div>
      <q-form @submit.prevent="changePasswd">
        <q-input
          v-if="userInfo.hasPasswd"
          v-model="changePdParam.oldPasswd"
          :type="isPwdArr[0] ? 'password' : 'text'"
          label="输入原密码"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwdArr[0] ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwdArr[0] = !isPwdArr[0]"
            />
          </template>
        </q-input>
        <q-input
          v-model="changePdParam.newPasswd"
          :type="isPwdArr[1] ? 'password' : 'text'"
          label="输入密码"
          :rules="[(val) => checkPd(val) || '密码必须包含字母和数字，至少8位']"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwdArr[1] ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwdArr[1] = !isPwdArr[1]"
            />
          </template>
        </q-input>
        <q-input
          v-model="changePdParam.newPasswd2"
          :type="isPwdArr[2] ? 'password' : 'text'"
          label="再输一遍"
          :rules="[
            (val) => val == changePdParam.newPasswd || '两次输入密码不一致',
          ]"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwdArr[2] ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwdArr[2] = !isPwdArr[2]"
            />
          </template>
        </q-input>
        <div class="q-pt-sm flex justify-between">
          <q-btn
            :loading="loadBtn"
            color="positive"
            :label="userInfo.hasPasswd ? '修改密码' : '设置密码'"
            type="submit"
          />
          <q-btn
            class="q-ml-sm"
            outline
            label="取消"
            @click="
              () => {
                changePdDig = false;
              }
            "
          />
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { initUserInfo, userInfo } from './shared';
import {
  settingCancelUser,
  settingSetPasswd,
  settingChangePasswd,
} from 'src/service/api';
import { checkPd, useYuan } from 'src/use';
import { useRouter } from 'vue-router';
import { useWebStore } from 'src/stores/webStore';
const { Confirm, Ok, Fail } = useYuan();
const { replace } = useRouter();
const webStore = useWebStore();

const tab = ref('home');
const changePdDig = ref(false);
const isPwdArr = ref([true, true, true]);
const loadBtn = ref(false);
const changePdParam = ref({
  oldPasswd: '',
  newPasswd: '',
  newPasswd2: '',
});
const passwd = computed(() => {
  return userInfo.value.hasPasswd ? 'xxxxxx' : '';
});
const changePasswd = async () => {
  if (userInfo.value.hasPasswd) {
    if (changePdParam.value.oldPasswd == '') {
      return Fail('请输入原密码');
    }
  }
  if (changePdParam.value.newPasswd == '') {
    return Fail('请输入新密码');
  }
  if (changePdParam.value.newPasswd != changePdParam.value.newPasswd2) {
    return Fail('两次输入的密码不一致!');
  }
  loadBtn.value = true;
  if (userInfo.value.hasPasswd) {
    const { error } = await settingChangePasswd(changePdParam.value);
    loadBtn.value = false;
    changePdDig.value = false;
    if (!error) {
      Ok('密码修改成功');
      initUserInfo();
    }
  } else {
    const { error } = await settingSetPasswd(changePdParam.value);
    loadBtn.value = false;
    changePdDig.value = false;
    if (!error) {
      Ok('密码设置成功');
      initUserInfo();
    }
  }
};

const cancelUser = () => {
  Confirm(
    '请再次确认是否注销账号, 注销后将删除你所有数据, 且无法恢复！',
    async () => {
      const { error } = await settingCancelUser();
      if (!error) {
        await webStore.logout();
        await replace('/');
        location.reload();
        Ok('注销账号成功');
      }
    },
  );
};
</script>

<style scoped></style>
